<template>
  <div style="height: 100%; padding: 20px">
    <n-split
      direction="horizontal"
      style="height: 100%; background-color: #ffffff"
      :max="0.65"
      :min="0.55"
      :default-size="0.6"
    >
      <template #1>
        <div
          style="
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            margin-right: 20px;
            height: 100%;
          "
        >
          <span class="header-text" mt-15>任务信息</span>
          <n-scrollbar>
            <n-flex mt-20>
              <span>任务类型：</span>
              <n-radio-group v-model:value="task" name="radiogroup">
                <n-space>
                  <n-radio
                    v-for="task in tasks"
                    :key="task.value"
                    :value="task.value"
                  >
                    {{ task.value }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </n-flex>
            <n-flex mt-20>
              <span>结果语言：</span>
              <n-select
                style="width: 80%"
                v-model:value="language"
                size="small"
                :options="languages"
              />
            </n-flex>
            <div v-if="task === '翻译文案'">
              <n-flex mt-20>
                <span>输入标题：</span>
                <n-input
                  v-model:value="translateInfo.title"
                  type="textarea"
                  maxlength="30"
                  style="width: 80%"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>输入要点：</span>
                <n-input
                  v-model:value="translateInfo.keyword"
                  type="textarea"
                  placeholder="一行一个，回车换行"
                  maxlength="50"
                  style="width: 80%"
                  :autosize="{
                    minRows: 4,
                    maxRows: 6,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>输入描述：</span>
                <n-input
                  v-model:value="translateInfo.description"
                  type="textarea"
                  maxlength="2000"
                  style="width: 80%"
                  :autosize="{
                    minRows: 6,
                    maxRows: 10,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-15 pb-20 mr-30 justify="end">
                <n-button
                  type="primary"
                  size="small"
                  @click="clearTranslateInfo"
                  >清空</n-button
                >
                <n-button
                  type="primary"
                  size="small"
                  @click="queryTranslateService"
                  :loading="chatLoading"
                  >生成结果</n-button
                >
              </n-flex>
            </div>
            <div v-if="task === '生成文案'">
              <n-flex mt-20>
                <span>生成字数：</span>
                <n-input-number
                  v-model:value="generateInfo.quantity"
                  size="small"
                  :step="10"
                />
              </n-flex>
              <n-flex mt-20>
                <span>商品类型：</span>
                <n-input
                  v-model:value="generateInfo.productType"
                  type="textarea"
                  placeholder=""
                  maxlength="30"
                  style="width: 80%"
                  :autosize="{
                    minRows: 2,
                    maxRows: 3,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>商品品牌：</span>
                <n-input
                  v-model:value="generateInfo.brand"
                  type="textarea"
                  placeholder=""
                  maxlength="30"
                  style="width: 80%"
                  :autosize="{
                    minRows: 2,
                    maxRows: 3,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>受众人群：</span>
                <n-input
                  v-model:value="generateInfo.people"
                  type="textarea"
                  placeholder=""
                  maxlength="30"
                  style="width: 80%"
                  :autosize="{
                    minRows: 1,
                    maxRows: 2,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>产品型号：</span>
                <n-input
                  v-model:value="generateInfo.size"
                  type="textarea"
                  placeholder=""
                  maxlength="30"
                  style="width: 80%"
                  :autosize="{
                    minRows: 2,
                    maxRows: 3,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>提示语句：</span>
                <n-input
                  v-model:value="generateInfo.prompt"
                  type="textarea"
                  placeholder="一行一个，回车换行"
                  maxlength="100"
                  style="width: 80%"
                  :autosize="{
                    minRows: 4,
                    maxRows: 5,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>关键词语：</span>
                <n-input
                  v-model:value="generateInfo.keyword"
                  type="textarea"
                  placeholder="一行一个，回车换行"
                  maxlength="50"
                  style="width: 80%"
                  :autosize="{
                    minRows: 3,
                    maxRows: 5,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-15 pb-20 mr-30 justify="end">
                <n-button type="primary" size="small" @click="clearGenerateInfo"
                  >清空</n-button
                >
                <n-button
                  type="primary"
                  size="small"
                  @click="queryGenerateService"
                  :loading="chatLoading"
                  >生成结果</n-button
                >
              </n-flex>
            </div>
            <div v-if="task === '优化文案'">
              <n-flex mt-20>
                <span>生成字数：</span>
                <n-input-number
                  v-model:value="optimizeInfo.quantity"
                  size="small"
                />
              </n-flex>
              <n-flex mt-20>
                <span>原文内容：</span>
                <n-input
                  v-model:value="optimizeInfo.description"
                  type="textarea"
                  placeholder=""
                  maxlength="300"
                  style="width: 80%"
                  :autosize="{
                    minRows: 5,
                    maxRows: 8,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-20>
                <span>优化提示：</span>
                <n-input
                  v-model:value="optimizeInfo.prompt"
                  type="textarea"
                  placeholder="输入优化原文内容的提示语"
                  maxlength="100"
                  style="width: 80%"
                  :autosize="{
                    minRows: 5,
                    maxRows: 8,
                  }"
                  show-count
                />
              </n-flex>
              <n-flex mt-15 pb-20 mr-30 justify="end">
                <n-button type="primary" size="small" @click="clearOptimizeInfo"
                  >清空</n-button
                >
                <n-button
                  type="primary"
                  size="small"
                  @click="queryOptimizeService"
                  :loading="chatLoading"
                  >生成结果</n-button
                >
              </n-flex>
            </div>
          </n-scrollbar>
        </div>
      </template>
      <template #2>
        <div
          style="
            display: flex;
            flex-direction: column;
            margin: 0 20px;
            height: 100%;
          "
        >
          <span class="header-text" mt-15>龙腾Chatbot生成文案</span>
          <div style="flex-grow: 1; overflow: auto">
            <n-scrollbar>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  margin: 20 0;
                  height: 100%;
                "
              >
                <div
                  style="
                    display: flex;
                    flex-direction: column-reverse;
                    flex-grow: 1;
                    margin: 10px 0;
                    border-radius: 10px;
                    background-color: #f3f4f6;
                    overflow-y: auto;
                  "
                >
                  <div style="flex: 1 1 0%"></div>
                  <div style="padding: 6px">
                    <div
                      style="
                        display: flex;
                        min-width: 0;
                        flex-direction: column;
                        border-radius: 1px;
                      "
                    >
                      <div
                        style="
                          flex: 1 1 0%;
                          position: relative;
                          border-radius: 12px;
                          padding: 20px 10px;
                          background-color: #f3f4f6;
                          color: #4b5563;
                          min-height: 40px;
                        "
                      >
                        <div
                          style="white-space: pre-wrap"
                          v-html="response ? marked(response) : '无'"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div></div
            ></n-scrollbar>
          </div>
        </div>
      </template>
    </n-split>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { NButton } from "naive-ui";
import { useChat } from "@/utils/llm";
import { marked } from "marked";

const tasks = [
  {
    value: "生成文案",
  },
  {
    value: "优化文案",
  },
  {
    value: "翻译文案",
  },
];
const task = ref("翻译文案");
const languages = [
  {
    label: "英语",
    value: "英语",
  },
  {
    label: "德语",
    value: "德语",
  },
  {
    label: "日语",
    value: "日语",
  },
  {
    label: "意大利语",
    value: "意大利语",
  },
  {
    label: "法语",
    value: "法语",
  },
  {
    label: "葡萄牙语",
    value: "葡萄牙语",
  },
  {
    label: "土耳其语",
    value: "土耳其语",
  },
  {
    label: "阿拉伯语",
    value: "阿拉伯语",
  },
];
const language = ref("英语");
const translateInfo = ref({
  title: "",
  keyword: "",
  description: "",
});
const generateInfo = ref({
  productType: "",
  people: "",
  brand: "",
  size: "",
  prompt: "",
  keyword: "",
  quantity: 150,
});
const optimizeInfo = ref({
  description: "",
  prompt: "",
  quantity: 150,
});
const { chat, response } = useChat();
const chatLoading = ref(false);
const clearTranslateInfo = () => {
  translateInfo.value.title = "";
  translateInfo.value.keyword = "";
  translateInfo.value.description = "";
};
const clearGenerateInfo = () => {
  generateInfo.value.productType = "";
  generateInfo.value.people = "";
  generateInfo.value.brand = "";
  generateInfo.value.size = "";
  generateInfo.value.prompt = "";
  generateInfo.value.keyword = "";
  generateInfo.value.quantity = 150;
};
const clearOptimizeInfo = () => {
  optimizeInfo.value.text = "";
  optimizeInfo.value.prompt = "";
  optimizeInfo.value.quantity = 150;
};

const queryTranslateService = async () => {
  try {
    chatLoading.value = true;
    const content = `分别翻译标题、关键词、描述三个部分为${language.value}语言:
    标题为:${translateInfo.value.title},关键词为：${translateInfo.value.keyword},描述为：${translateInfo.value.description}`;
    const messages = [
      {
        role: "user",
        content,
      },
    ];
    await chat(messages);
  } catch (err) {
    response.value = "小龙腾当前正在忙！请稍后重试！";
  } finally {
    chatLoading.value = false;
  }
};

const queryGenerateService = async () => {
  try {
    chatLoading.value = true;
    const content = `根据：商品类型为:${generateInfo.value.productType},受众人群为：${generateInfo.value.people},商品品牌为：${generateInfo.value.brand}
    型号为：${generateInfo.value.size},提示语为：${generateInfo.value.prompt}关键词为：${generateInfo.value.keyword}
    生成一段跨境电商对产品的描述文案，最后翻译为${generateInfo.value.quantity}个字的${language.value}语言文案，将这两部分内容都输出。`;
    const messages = [
      {
        role: "user",
        content,
      },
    ];
    await chat(messages);
  } catch (err) {
    console.log(err);
    response.value = "小龙腾当前正在忙！请稍后重试！";
  } finally {
    chatLoading.value = false;
  }
};

const queryOptimizeService = async () => {
  try {
    chatLoading.value = true;
    const content = `根据：商品类型为:${generateInfo.value.productType},受众人群为：${generateInfo.value.people},商品品牌为：${generateInfo.value.brand}
    型号为：${generateInfo.value.size},提示语为：${generateInfo.value.prompt}关键词为：${generateInfo.value.keyword}
    生成一段跨境电商对产品的描述文案，最后将文案翻译为${generateInfo.value.quantity}个字的${language.value}语言文案，将这两部分内容都输出。`;
    const messages = [
      {
        role: "user",
        content,
      },
    ];
    await chat(messages);
  } catch (err) {
    response.value = "小龙腾当前正在忙！请稍后重试！";
  } finally {
    chatLoading.value = false;
  }
};
const output = ref("");
</script>
<style scoped>
.header-text {
  line-height: 30px;
  font-size: 20px;
  font-weight: 700;
  color: #0b1019;
  position: relative;
}
</style>
